<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 2D 变换</title>
        <style type="text/css">
            .test{
                width: 100px;
                height: 100px;
                border: 1px solid #000;
                margin: 0 0 50px 20px;
                box-sizing: content-box;
            }
            .test div{
                width: 100px;
                height: 100px;
                background: #ddd;
                word-wrap: break-word;
            }
            .test .matrix{
                transform:matrix(1,0,0,1,30,30)
            }
            .test .translate{
                transform:translate(-10px,-10px)
            }
            .test .translateX{
                transform:translateX(20px)
            }
            .test .translateY{
                transform:translateY(20px)
            }
            .test .rotate1{
                transform: rotate(45deg);
            }
            .test .scale{
                transform:scale(.8,.8)
            }
            .test .scaleX{
                transform:scaleX(1.2)
            }
            .test .scaleY{
                transform:scaleY(1.2)
            }
            .test .skew{
                transform: skew(10deg, 10deg);
            }
            .test .skewX{
                transform: skewX(5deg);
            }
            .test .skewY{
                transform: skewY(11deg);
            }
        </style>
</head>
<body>
<h3>矩阵变换：matrix()</h3>
<div class="test">
    <div class="matrix">
        transform:matrix(0,1,1,1,10,10)
    </div>
</div>
<h3>移动：translate(),translateX(),translateY()</h3>
<div class="test">
    <div class="translate">
        transform:translate(-10px,-10px)
    </div>
</div>
<div class="test">
    <div class="translateX">
        transform:translateX(20px)
    </div>
</div>
<div class="test">
    <div class="translateY">
        transform:translateY(10px)
    </div>
</div>
<h3>旋转：rotate()</h3>
<div class="test">
    <div class="rotate1">
        transform:rotate(45deg)
    </div>
</div>
<h3>缩放：scale()</h3>
<div class="test">
    <div class="scale">
        transform:scale(.8,.8)
    </div>
</div>
<div class="test">
    <div class="scaleX">
        transform:scaleX(1.2)
    </div>
</div>
<div class="test">
    <div class="scaleY">
        transform:scaleY(1.2)
    </div>
</div>
<h3>倾斜：skew()</h3>
<div class="test">
    <div class="skew">
        transform:skew(10deg,10deg)
    </div>
</div>
<div class="test">
    <div class="skewX">
        transform:skewX(5deg)
    </div>
</div>
<div class="test">
    <div class="skewY">
        transform:skewY(5deg)
    </div>
</div>
</body>
</html>